<template>
  <div class="drawer-item">
    <el-switch
      :value="userForm.transferPriceType"
      active-color="#ff4949"
      inactive-color="#1890ff"
      :active-text="$t('userInfo.custom')"
      :inactive-text="$t('userInfo.default')"
      :inactive-value="1"
      :active-value="2"
      @change="setTransferDefault"
      class="mgb20"
    >
    </el-switch>

    <div>
      <div class="label-title">{{$t('table.包车单价')}}：</div>
      <el-input-number
        v-model="userForm.charteredCarFee"
        autocomplete="off"
        :precision="2"
        :min="0"
        @change="changeTransferPrice"
      ></el-input-number>
      {{ $t('table.元/单') }}
    </div>

    <div>
      <div class="label-title">{{$t('table.贴SKU标单价')}}：</div>
      <el-input-number
        v-model="userForm.goodsLabelFee"
        autocomplete="off"
        :precision="2"
        :min="0"
        @change="changeTransferPrice"
      ></el-input-number>
      {{ $t('table.元/个') }}
    </div>

    <div>
      <div class="label-title">{{$t('table.贴外箱标单价')}}：</div>
      <el-input-number
        v-model="userForm.boxLabelFee"
        autocomplete="off"
        :precision="2"
        :min="0"
        @change="changeTransferPrice"
      ></el-input-number>
      {{ $t('table.元/个') }}
    </div>

    <div>
      <div class="label-title">{{$t('table.调货单价')}}：</div>
    </div>
    <div class="middle-input">
      <div class="weight f14">{{$t('每箱实重或体积重')}}</div>
      <div class="price f14">{{$t('setting.Unit price')}}</div>
    </div>
    <div
      class="middle-input"
      v-for="(item,index) in userForm.transferFeeList"
      :key="'transfer' + index"
    >
      <div class="weight">
        ≥
        <el-input-number
          v-model="item.weight"
          :min="0"
          :precision="2"
          controls-position="right"
          :disabled="index === 0"
          @change="changeTransferPrice"
        ></el-input-number>
        kg
      </div>
      <div class="price">
        <el-input-number
          v-model="item.price"
          :min="0"
          :precision="2"
          @change="changeTransferPrice"
        ></el-input-number>
        {{$t('table.元/箱')}}
        <div class="mgl10" style="display: inline">
          <template v-if="index !== 0">
            <el-button style="padding: 2px" type="danger" size="small" icon="el-icon-minus" circle @click="removeArrItemByIndex(userForm.transferFeeList,index);changeTransferPrice()"></el-button>
          </template>
        </div>
      </div>
    </div>
    <div class="mgb20">
      <el-button icon="el-icon-plus" type="primary" @click="addTransferFeeList(userForm.transferFeeList);changeTransferPrice()">{{ $t('setting.添加更多重量范围') }}</el-button>
    </div>


    <div>
      <div class="label-title">
        {{$t('table.送仓单价（常规）')}}
      </div>
    </div>
    <div class="middle-input">
      <div class="weight f14">{{$t('每箱实重或体积重')}}</div>
      <div class="price f14">{{$t('setting.Unit price')}}</div>
    </div>
    <div
      class="middle-input"
      v-for="(item,index) in userForm.middleGeneralPrice"
      :key="'middleG' + index"
    >
      <div class="weight">
        ≥
        <el-input-number
          v-model="item.weight"
          :min="0"
          :precision="2"
          controls-position="right"
          :disabled="index === 0"
          @change="changeTransferPrice"
        ></el-input-number>
        kg
      </div>
      <div class="price">
        <el-input-number
          v-model="item.price"
          :min="0"
          :precision="2"
          @change="changeTransferPrice"
        ></el-input-number>
        {{$t('table.元/箱')}}
        <div class="mgl10" style="display: inline">
          <template v-if="index !== 0">
            <el-button style="padding: 2px" type="danger" size="small" icon="el-icon-minus" circle @click="removeArrItemByIndex(userForm.middleGeneralPrice,index);changeTransferPrice()"></el-button>
          </template>
        </div>
      </div>
    </div>
    <div class="mgb20">
      <el-button icon="el-icon-plus" type="primary" @click="addMiddleGeneral(userForm.middleGeneralPrice);changeTransferPrice()">{{ $t('setting.添加更多重量范围') }}</el-button>
    </div>

    <div>
      <div class="label-title">
        {{$t('table.送仓单价（快递）')}}
      </div>
    </div>
    <div class="middle-input">
      <div class="weight f14">{{$t('每箱实重或体积重')}}</div>
      <div class="price f14">{{$t('setting.Unit price')}}</div>
    </div>
    <div
      class="middle-input"
      v-for="(item,index) in userForm.middleExpressPrice"
      :key="'middleE' + index"
    >
      <div class="weight">
        ≥
        <el-input-number
          v-model="item.weight"
          :min="0"
          :precision="2"
          controls-position="right"
          :disabled="index === 0"
          @change="changeTransferPrice"
        ></el-input-number>
        kg
      </div>
      <div class="price">
        <el-input-number
          v-model="item.price"
          :min="0"
          :precision="2"
          @change="changeTransferPrice"
        ></el-input-number>
        {{$t('table.元/箱')}}
        <div class="mgl10" style="display: inline">
          <template v-if="index !== 0">
            <el-button style="padding: 2px" type="danger" size="small" icon="el-icon-minus" circle @click="removeArrItemByIndex(userForm.middleExpressPrice,index);changeTransferPrice()"></el-button>
          </template>
        </div>
      </div>
    </div>
    <div class="mgb20">
      <el-button icon="el-icon-plus" type="primary" @click="addMiddleExpress(userForm.middleExpressPrice);changeTransferPrice()">{{ $t('setting.添加更多重量范围') }}</el-button>
    </div>



  </div>
</template>

<script>
import GoodsSizePriceMixin from "@/views/setting/mixin/GoodsSizePriceMixin";
import {deepCopy} from "@/utils";
import TransferFeeListMixin from "@/views/setting/mixin/TransferFeeListMixin";
import MiddlePriceMixin from "@/views/setting/mixin/MiddlePriceMixin";

export default {
  name: 'TransferPriceDrawerItem',
  mixins: [TransferFeeListMixin,MiddlePriceMixin],
  props: {
    userSetting: {
      type: Object,
    },
    userForm: {
      type: Object,
    },
    setting: {
      type: Object,
    }
  },
  data(){
    return {}
  },
  methods: {
    changeTransferPrice(){
      this.userForm.transferPriceType = 2;
    },
    // 设置大货中转默认
    setTransferDefault(){
      if(this.userForm.transferPriceType === 1){
        this.userForm.transferPriceType = 2;
      }else{
        this.userForm.transferPriceType = 1;
      }
      this.userForm.transfer2warehouse = this.setting.transfer2warehouse;
      this.userForm.goodsLabelFee = this.setting.goodsLabelFee;
      this.userForm.transferFee = this.setting.transferFee;
      this.userForm.boxLabelFee = this.setting.boxLabelFee;
      this.userForm.charteredCarFee = this.setting.charteredCarFee
      this.userForm.middleExpressPrice = deepCopy(this.setting.middleExpressPrice) // 送仓单价（快递）
      this.userForm.middleGeneralPrice = deepCopy(this.setting.middleGeneralPrice) // 送仓单价（常规）
      this.userForm.transferFeeList = deepCopy(this.setting.transferFeeList)
    },
  }
}
</script>

<style scoped lang="scss">
@import "../scss/drawer-item";
.label-title{
  display: inline-block !important;
  min-width: 150px;
}
</style>
